import React, { useState, useEffect } from 'react';
import { Avatar, Image, Table, Button, Modal, Input } from 'antd';
import { UserOutlined, HeartOutlined, PhoneOutlined, GlobalOutlined, SketchOutlined } from '@ant-design/icons';
import { doLogin } from '@a/login'
import './style.scss'
const { TextArea } = Input;
const onChange = (e) => {
  console.log(e);
};
export default function UserInfo() {
  const userInfo1 = JSON.parse(localStorage.getItem("userInfo"))
  // console.log(userInfo1.avatar, 0);
  const columns = [
    {
      title: '昵称',
      dataIndex: 'nickName',
      key: 'nickName'
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex'
    },
    {
      title: '所在地',
      dataIndex: 'address',
      key: 'address'
    },
    {
      title: '所属',
      dataIndex: 'organ',
      key: 'organ'
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone'
    }
  ]
  const [user, setUser] = useState([])
  const [open, setOpen] = useState(false);
  const getUser = () => {
    doLogin().then(res => {
      console.log(res.data.data)
      if (res.data.code === 200) {
        setUser(res.data.data.userInfo)
        // console.log(res.data.data, 111)
      }
    })
  }
  useEffect(() => {
    getUser()
  }, [])
  return (
    <div>
      <Avatar size={178} src={<Image src={userInfo1.avatar} />} />
      {/* 编辑弹窗 */}
      <Button className='userBut' type="primary" onClick={() => setOpen(true)}>
        编辑
      </Button>
      <Modal
        title="编辑资料"
        centered
        open={open}
        onOk={() => {
          setOpen(false)
          history.go(0)
        }}
        onCancel={() => setOpen(false)}
        width={1000}
      >
        <Input className='userinp' size="large" placeholder="昵称" prefix={<UserOutlined />} allowClear onChange={onChange} />
        <Input className='userinp' size="large" placeholder="性别" prefix={<HeartOutlined />} allowClear onChange={onChange} />
        <Input className='userinp' size="large" placeholder="所在地" prefix={<SketchOutlined />} allowClear onChange={onChange} />
        <Input className='userinp' size="large" placeholder="所属" prefix={<GlobalOutlined />} allowClear onChange={onChange} />
        <Input className='userinp' size="large" placeholder="手机号" prefix={<PhoneOutlined />} allowClear onChange={onChange} />

      </Modal>
      {/* 编辑弹窗 */}
      <Table className='userinfo' dataSource={[user]} columns={columns} pagination={false} />
    </div>
  )
}
